<script setup>
	import {
		useMachine
	} from '../funjs/machine.js'

	const [state, send] = useMachine({
		id: 'toggle',
		initial: 'inactive',
		states: {
			inactive: {
				on: {
					TOGGLE: 'active'
				}
			},
			active: {
				on: {
					TOGGLE: 'inactive'
				}
			}
		}
	})
</script>

<template>
	<button @click="send('TOGGLE')">
		{{ state.matches("inactive") ? "Off" : "On" }}
	</button>
</template>